import { Card, Tag } from "@/components/base";
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";
import styles from './index.module.less';
import { ClockCircleOutlined, UserOutlined } from "@ant-design/icons";
import { PageController } from "../../page-controller";
import { useObserver } from "mobx-react-lite";
import React from "react";
import * as dataDictionary from "@shared/constant/dataDictionary";
import { toCurrency } from "@/utils/funs";

const { Text, Title } = Typography;

export function BasicInfo() {

    const pageController = React.useContext(PageController.Context);
    const data = useObserver(() => pageController.data);

    return (
        <Card>
            <Flex vertical gap={8}>
                {/* 头部信息 */}
                <Flex justify="space-between" align="center" gap={8}>
                    <Title level={4} style={{ margin: 0 }}>
                        {data?.name}
                    </Title>
                    <Flex gap={8} align="center">
                        <Tag color='warning' style={{ fontSize: '12px' }}>
                            {data?.code}
                        </Tag>
                        {
                            // 启用状态
                            data?.status === dataDictionary.ServiceStatus.ENABLED && <Tag
                                color="success"
                                style={{ fontSize: '12px' }}
                            >
                                {dataDictionary.serviceStatusStr[data?.status]}
                            </Tag>
                        }
                        {
                            // 禁用状态
                            data?.status === dataDictionary.ServiceStatus.DISABLED && <Tag
                                color="error"
                                style={{ fontSize: '12px' }}
                            >
                                {dataDictionary.serviceStatusStr[data?.status]}
                            </Tag>
                        }
                    </Flex>
                </Flex>

                {/* 服务描述 */}
                <Text type="secondary" style={{ fontSize: '14px', lineHeight: '1.5' }}>
                    {data?.description}
                </Text>

                {/* 服务属性 */}
                <Flex gap={12} align='center' justify='center' style={{ marginBottom: 16 }}>
                    <Flex gap={4} align='center'>
                        <UserOutlined style={{ fontSize: 12, color: '#666' }} />
                        <Text size={12} type='secondary' style={{ lineHeight: 'unset' }} >{dataDictionary.serviceClassificationStr[data?.category]}</Text>
                    </Flex>
                    <Flex gap={4} align='center'>
                        <ClockCircleOutlined style={{ fontSize: 12, color: '#666' }} />
                        <Text size={12} type='secondary' style={{ lineHeight: 'unset' }} >{data?.duration}分钟</Text>
                    </Flex>
                    <Flex gap={4} align='center'>
                        <Text size={12} type='secondary' style={{ lineHeight: 'unset' }} >护理师要求: {dataDictionary.nurseLevelStr[data?.technicianLevel]}</Text>
                    </Flex>
                </Flex>
            </Flex>

            {/* 标签 */}
            {/* <Flex gap={8} style={{ marginBottom: 12 }}>
                <Text type="secondary" style={{ fontSize: '12px' }}>
                    标签:
                </Text>
                <Flex gap={8} wrap="wrap">
                    <Tag color="default" style={{ fontSize: '12px' }}>
                        热门
                    </Tag>
                    <Tag color="default" style={{ fontSize: '12px' }}>
                        推荐
                    </Tag>
                </Flex>
            </Flex> */}

            {/* 价格信息 */}
            <Flex align="center" className={styles['price-info']}>
                <PriceInfo price={toCurrency(data?.cashPrice, '¥')} label="产品定价" color="#52c41a" />
                <PriceInfo price={toCurrency(data?.cardPrice, '¥')} label="划卡金额" color="#1890ff" />
                <PriceInfo price={`${data?.integral}`} label="赠送积分" color="#722ed1" />
            </Flex>
        </Card >
    );
}

/**
 * 价格信息组件
 * @param props 
 * @returns 
 */
function PriceInfo(props: {
    price?: string;
    label?: string;
    color?: string;
}) {
    const { price = 88, label = '价格', color = '#52c41a' } = props;
    return (
        <Flex vertical gap={4} align="center">
            <Text style={{ color: color, fontSize: '18px', fontWeight: 'bold' }}>
                {price}
            </Text>
            <Text type="secondary" style={{ fontSize: '12px' }}>
                {label}
            </Text>
        </Flex>
    );
} 